import { Component } from 'react';

import { Boxs    } from 'saltui';
const { HBox, Box,VBox } = Boxs;

import './rate.less';



export default class Page extends Component {
  constructor(props) {
    super(props);
    this.state = {
      readOnly: props.readOnly
    }
  }
  handleShow(i,e){
    let readOnlyVal = this.props.readOnly;
    if(!readOnlyVal){
      let scores= this.props.score;
      for (var j = 0; j < scores.length; j++) {
        let obj = scores[j];
        if (i == j) {
          obj.checked = true;
        }else{
          obj.checked = false;
        }      
      };
      this.setState({
        scores:scores,
      });
      this.props.onChange(i+1);
    }
   
  }


  render() {
    const t=this;
    let last=t.props.score.length;
    return (
        <div>
          {
            t.props.type == '1'?
            <div className="t-OFA dd-ques-table">
              <table>
                <thead>
                  {
                    t.props.score.map(function(item,i){
                      return(
                        <th className="t-FS16">{(i == 0 || i == (last-1)) ? item.text : ""}</th>
                      )
                    }.bind(this))
                  }
                </thead>
                <tbody>
                  <tr>
                    {
                      t.props.score.map(function(item,i){
                        return(
                          <td>
                            <HBox vAlign="top" className="t-FS14 t-FC3 t-PR20">
                              <Box onClick={this.handleShow.bind(this,i)}>
                                <div className={item.checked?'t-checkbox-field-icon-list t-MT2 t-list-cricle checked':'t-checkbox-field-icon-list t-list-cricle un-checked t-MT2'}  >
                                  <i className="iconfont icon-checked t-FCf t-FS14"></i>
                                </div>
                              </Box> 
                              <Box className="t-PL10 t-PB10 t-FS16"><span>{item.score}</span></Box>
                            </HBox>
                          </td>
                        )
                      }.bind(this))
                    }
                  </tr>
                </tbody>
              </table>
            </div>
            :
            <VBox className={t.state.readOnly?"t-fw t-FCreadonly":"t-fw"} vAlign="center">
              {
                t.props.score.map(function(item,i){
                  return(
                    <HBox vAlign="top" className="t-FS14 t-FC3 t-PR20">
                        <Box onClick={this.handleShow.bind(this,i)}>
                          <div className={item.checked?'t-checkbox-field-icon-list t-MT2 t-list-cricle checked':'t-checkbox-field-icon-list t-list-cricle un-checked t-MT2'}  >
                            <i className="iconfont icon-checked t-FCf t-FS14"></i>
                          </div>
                        </Box> 
                        <Box className="t-PL10 t-PB10 t-FS16"><span>{item.text}</span></Box>
                    </HBox>
                  )
                }.bind(this))
              }
            </VBox>
          }
        </div>  	
    );
  }
}



